<template>
<div class='tabBar'>
<div class="tabBar_item" :class="{on:'/msite'===$route.path}" @click="toAddress('/msite')">
    <i class="iconfont icon-waimai"></i>
    <span>外卖</span>
</div>
<div class="tabBar_item" :class="{on:'/search'===$route.path}" @click="toAddress('/search')">
    <i class="iconfont icon-search"></i>
    <span>搜索</span>
</div>  
<div class="tabBar_item" :class="{on:'/order'===$route.path}" @click="toAddress('/order')">
    <i class="iconfont icon-dingdan"></i>
    <span>订单</span>
</div>  
<div class="tabBar_item" :class="{on:'/profile'===$route.path}" @click="toAddress('/profile')">
    <i class="iconfont icon-geren"></i>
    <span>我的</span>
</div>  
</div>
</template>

<script>
export default {
name: 'tabBar',
components: {},
methods:{
    toAddress(path){
        this.$router.push(path)
    }
}
}
</script>

<style lang='stylus' rel='stylesheet/stylus'>
    @import "../../common/stylus/mixins.styl"
    .tabBar
        top-border-1px(#e4e4e4)
        position fixed
        left 0
        right 0
        bottom 0
        height 50px
        width 100%
        z-index 999
        display flex
        .tabBar_item
            height 100%
            width 25%
            background-color #fff
            text-align center
            align-items center
            padding-top 7px
            color #999999
            &.on
                color #02a774
            i 
                display block
                font-size 22px
                width 100%  
                height 40%
            span 
                font-size 10px

</style>